<template>
	<view class="wrap">
		<view class="options">
			<scroll-view class="op-item" scroll-x="true">
				<view @click="changeArtType(item.onlyCode)" :class="typeCode===item.onlyCode?'op op-active':'op'" v-for="item in artType"
				 :key='item.id'>{{item.name}}</view>
			</scroll-view>
		</view>
		<u-waterfall v-model="flowList" ref="uWaterfall">
			<template v-slot:left="{ leftList }">
				<view class="demo-warter" v-for="(item, index) in leftList" :key="index" @click="$link('/pagesMain/news/newsDetail?id='+item.id)">
					<!-- 警告：微信小程序不支持嵌入lazyload组件，请自行如下使用image标签 -->
					<!-- #ifndef MP-WEIXIN -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.coverImg" :index="index"></u-lazy-load>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="demo-img-wrap"><image class="demo-image" :src="item.coverImg" mode="widthFix"></image></view>
					<!-- #endif -->
					<view class="demo-title">{{ item.title }}</view>
					<view class="demo-price"></view>
					<view class="info">
						<text class="desc">{{item.creationTime}}</text>
						<text class="desc view">{{item.hits}}</text>
					</view>
				</view>
			</template>
			<template v-slot:right="{ rightList }">
				<view class="demo-warter" v-for="(item, index) in rightList" :key="index" @click="$link('/pagesMain/news/newsDetail?id='+item.id)">
					<!-- #ifndef MP-WEIXIN -->
					<u-lazy-load threshold="-450" border-radius="10" :image="item.coverImg" :index="index"></u-lazy-load>
					<!-- #endif -->
					<!-- #ifdef MP-WEIXIN -->
					<view class="demo-img-wrap"><image class="demo-image" :src="item.coverImg" mode="widthFix"></image></view>
					<!-- #endif -->
					<view class="demo-title">{{ item.title }}</view>
					<view class="info">
						<text class="desc">{{item.creationTime}}</text>
						<text class="desc view">{{item.hits}}</text>
					</view>
				</view>
			</template>
		</u-waterfall>
		<view class="no-info">{{text}}</view>
	</view>
</template>

<script>
	import common from '../../utils/common.js'
	import api from '../../utils/api.js'
export default {
	data() {
		return {
			common,
			typeCode: 'fzgs',
			artType: [], // 文章类别
			pageIndex: 1,
			pageSize: 10,
			totalCount: 0,
			items: [],
			text: '暂无相关信息~',
			loadStatus: 'loadmore',
			flowList: [],
		
		};
	},
	
	onLoad() {
		this.pageSize = common.pageSize
		this.getDictionaryArrayByCode()
		this.addRandomData()
	},
		
	onReachBottom() {
		this.loadStatus = 'loading';
		// 模拟数据加载
		setTimeout(() => {
			this.addRandomData();
			this.loadStatus = 'loadmore';
		}, 1000);
	},
	methods: {
		// 获取文章分类
		getDictionaryArrayByCode() {
			api.getDictionaryArrayByCode({
				onlyCode: common.dicCode.artType
			}, res => {
				console.log(res);
				this.artType = res || []
			})
		},
		
		addRandomData() {
			let {
				typeCode,
				pageIndex,
				pageSize
			} = this.$data
			api.getArticlePage({
				typeCode,
				pageIndex,
				pageSize
			}, (res) => {
				this.totalCount = res.totalCount
				if (this.pageSize > res.totalCount) {
					this.text = '已经没有更多了~'
				}
				let temp = res.items
				if (this.pageIndex !== 1) {
					temp = [...this.items, ...res.items]
				}
				temp.map(item => {
					item.creationTime = common.subTime(item.creationTime, 10)
				})
				this.flowList = temp
			})
		},
		
		changeArtType(onlyCode) {
			this.typeCode = onlyCode
			this.pageIndex = 1
			this.flowList = []
			this.$refs.uWaterfall.clear();
			this.addRandomData()
		},
	},
	
	onReachBottom() {
		if (this.pageIndex * this.pageSize >= this.totalCount) {
			this.text = '已经没有更多了~'
		} else {
			this.pageIndex++
			this.addRandomData()
		}
	}
};
</script>

<style>
/* page不能写带scope的style标签中，否则无效 */
page {
	background-color: rgb(240, 240, 240);
}
</style>

<style lang="scss" scoped>
	.options {
		padding: 0 20upx;
		box-sizing: border-box;
		.op-item {
			@include flex-base;
			white-space: nowrap;
			margin-bottom: 10upx;
			margin-top: 20upx;
		}

		.op {
			background-color: #f2f2f2;
			height: 50upx;
			padding: 0 20upx;
			border-radius: 50upx;
			display: inline-block;
			line-height: 50upx;
			font-size: $font-size-28;
			margin-right: 20upx;
		}

		.op-active {
			border: 1px solid $theme-color;
			color: $theme-color;
			background-color: #cdffe7;
		}
	}
.demo-warter {
	border-radius: 8px;
	margin: 5px;
	background-color: #ffffff;
	padding: 8px;
	position: relative;
}

.u-close {
	position: absolute;
	top: 32rpx;
	right: 32rpx;
}

.demo-img-wrap {
}

.demo-image {
	width: 100%;
	border-radius: 4px;
}

.demo-title {
	font-size: 30rpx;
	margin-top: 5px;
	color: $u-main-color;
}

.demo-tag {
	display: flex;
	margin-top: 5px;
}

.demo-tag-owner {
	background-color: $u-type-error;
	color: #ffffff;
	display: flex;
	align-items: center;
	padding: 4rpx 14rpx;
	border-radius: 50rpx;
	font-size: 20rpx;
	line-height: 1;
}

.demo-tag-text {
	border: 1px solid $u-type-primary;
	color: $u-type-primary;
	margin-left: 10px;
	border-radius: 50rpx;
	line-height: 1;
	padding: 4rpx 14rpx;
	display: flex;
	align-items: center;
	border-radius: 50rpx;
	font-size: 20rpx;
}

.demo-price {
	font-size: 30rpx;
	color: $u-type-error;
	margin-top: 5px;
}

.demo-shop {
	font-size: 22rpx;
	color: $u-tips-color;
	margin-top: 5px;
}
</style>
